<template>
  <div class="public-views gift">
    <div class="public-inner">
      <div class="gift-left">
        <div class="gift-wrap">
          <h3 class="home-title">推荐礼包</h3>
          <ul class="wrap-list clearFix" v-if="GiftGame">
            <li v-for="(item, index) in GiftGame" v-if="index < GiftGame.length/2"> 
              <router-link :to="{ path: '/details/gift', query: { giftId: item.id }}">
                <div class="list-content">
                  <i :style="{backgroundImage: 'url(' + item.icon + ')'}"></i>
                  <h3>
                    {{item.name}}
                    <i v-if="item.device === 'ios' || item.device === 'h5'" class="iconfont icon-pingguo ios"></i>
                    <i v-if="item.device === 'android' || item.device === 'h5'" class="iconfont icon-anzhuo android"></i>
                    <span v-if="item.device === 'h5'" class="h5">H5</span>
                  </h3>
                  <h4>{{item.title}}</h4>
                  <p>剩余数量<span>{{item.size}}</span>/{{item.user_number}}</p>
                  <p>截止时间<span>{{item.time}}</span></p>
                </div> 
              </router-link>
              <div class="list-bottom">
                <a href="javascript:;">领取礼包</a>
                <a href="javascript:;">下载游戏</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="gift-wrap">
          <h3 class="home-title">最新礼包</h3>
          <ul class="wrap-list clearFix">
            <li v-for="(item, index) in GiftGame" v-if="index > GiftGame.length/2"> 
              <router-link  :to="{ path: '/details/gift', query: { giftId: item.id }}">
                <div class="list-content">
                  <i v-lazy:background-image="item.icon"></i>
                  <h3>
                    {{item.name}}
                    <i v-if="item.device === 'ios' || item.device === 'h5'" class="iconfont icon-pingguo ios"></i>
                    <i v-if="item.device === 'android' || item.device === 'h5'" class="iconfont icon-anzhuo android"></i>
                    <span v-if="item.device === 'h5'" class="h5">H5</span>
                  </h3>
                  <h4>{{item.title}}</h4>
                  <p>剩余数量<span>{{item.size}}</span>/{{item.user_number}}</p>
                  <p>截止时间<span>{{item.time}}</span></p>
                </div> 
              </router-link>
              <div class="list-bottom">
                <a href="javascript:;">领取礼包</a>
                <a href="javascript:;">下载游戏</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="gift-right">
           <Right-SidebarRob></Right-SidebarRob>
        <Right-SidebarPlay v-if="GiftGame" :list="GiftGame"></Right-SidebarPlay>
      </div>
    </div>
  </div>
</template>

<script>


const RightSidebarRob = () => import('@/components/rightSidebarRob.vue')
const RightSidebarPlay =()=> import('@/components/rightSidebarPlay.vue')
export default {
  components: {
      RightSidebarRob,
      RightSidebarPlay
  },
  asyncData({ store, route }) {
    const s = parseInt(Math.random() * 200 + 1)
    const e = parseInt(Math.random() * 15 + 10)
    return store.dispatch('fetchGiftGame', { start: s, end: e, cache: true })
  },
  title() {
    return `米娱游戏_游戏礼包`
  },
  computed: {
    GiftGame: function() {
      return [{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201805/5afd41da67997.jpg","name":"泡泡军团","link":"javascript:;","device":"android","type":"策略","label":"历史","size":"92","state":"1","user_number":"104554","download_number":"14103","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201802/5a72c6c81c729.png","name":"美男有毒","link":"javascript:;","device":"android","type":"音乐","label":"科幻","size":"187","state":"3","user_number":"86680","download_number":"38320","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201712/5a420f811873d.png","name":"天界传奇","link":"javascript:;","device":"ios","type":"格斗","label":"科幻","size":"130","state":"2","user_number":"56033","download_number":"43107","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a67e31a9b6ce.png","name":"凤凰无双之豪侠传奇","link":"javascript:;","device":"android","type":"竞技","label":"科幻","size":"171","state":"3","user_number":"47940","download_number":"11654","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a50597aa0b5d.png","name":"三生诀","link":"javascript:;","device":"android","type":"棋牌","label":"战争","size":"127","state":"2","user_number":"104119","download_number":"18885","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201803/5aa1fbf833751.png","name":"毁灭王座","link":"javascript:;","device":"ios","type":"解密","label":"魔幻","size":"34","state":"2","user_number":"69237","download_number":"41700","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a5c002ea05a6.png","name":"龙纹王者","link":"javascript:;","device":"h5","type":"竞技","label":"魔幻","size":"119","state":"2","user_number":"13692","download_number":"36309","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201712/5a43094135407.png","name":"城堡英雄","link":"javascript:;","device":"ios","type":"竞速","label":"战争","size":"193","state":"1","user_number":"37977","download_number":"32725","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201801/5a4c341bed65d.png","name":"一世之尊（新版）","link":"javascript:;","device":"android","type":"音乐","label":"魔幻","size":"49","state":"1","user_number":"54329","download_number":"74852","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201712/5a421913e60bf.png","name":"沙城传说","link":"javascript:;","device":"android","type":"竞速","label":"魔幻","size":"175","state":"1","user_number":"72837","download_number":"29987","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/58806834b2994.png","name":"绝世神功","link":"javascript:;","device":"android","type":"射击","label":"战争","size":"73","state":"3","user_number":"28706","download_number":"18234","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201701/588067fa23b3a.png","name":"大圣外传","link":"javascript:;","device":"android","type":"格斗","label":"魔幻","size":"43","state":"1","user_number":"31286","download_number":"29425","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201707/5966db9865790.png","name":"王座守护者","link":"javascript:;","device":"android","type":"养成","label":"科幻","size":"116","state":"1","user_number":"24663","download_number":"29341","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201802/5a7f8b3b371bd.png","name":"心动女生","link":"javascript:;","device":"android","type":"动作","label":"动漫","size":"152","state":"2","user_number":"88704","download_number":"38208","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201712/5a44ae49d5b39.png","name":"寻仙曲","link":"javascript:;","device":"h5","type":"音乐","label":"仙侠","size":"141","state":"3","user_number":"16516","download_number":"74405","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201710/59e6bacd1a30a.png","name":"教主之家","link":"javascript:;","device":"android","type":"射击","label":"战争","size":"196","state":"0","user_number":"95199","download_number":"39993","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"},{"id":"0","icon":"http://res.lequ.com/Public/Uploads/201712/5a38e4177d621.png","name":"放开那妖怪","link":"javascript:;","device":"ios","type":"格斗","label":"动漫","size":"24","state":"3","user_number":"76030","download_number":"101662","title":"下载微信登录即钻石777","time":"2017-05-20","pic":"http://fanyi.baidu.com/static/translation/img/footer/wechat_76663d3.jpg"}]
    }
  }
}
</script>

<style lang="less" scoped>
.gift-left {
  width: 900px;
  float: left;
  .gift-wrap {
    padding: 0 25px;
    background-color: #fff;
    box-shadow: 1px 1px 10px 1px #ddd;
    .home-title {
      line-height: 70px;
      border-bottom: 1px solid #eee;
    }
    .wrap-list {
      margin-bottom: 40px;
      padding-bottom: 40px;
      li {
        margin-top: 30px;
        margin-right: 30px;
        float: left;
        border: 1px solid #eee;
        width: 408px;
        background: linear-gradient(to right, #f8f7f7, white);
        position: relative;
        &:nth-child(2n) {
          margin-right: 0;
        }
        & > a {
          display: block;
        }
      }
      .list-content {
        padding: 24px 24px 24px 144px;
        position: relative;
        & > i {
          width: 100px;
          height: 100px;
          position: absolute;
          left: 24px;
          top: 24px;
          background-size: 100%;
          background-repeat: no-repeat;
        }
        h3 {
          padding-top: 3px; 
          margin-right: -24px;
          i {
            margin-left: 10px;
          }
          span {
            margin-left: 10px;
            font-size: 14px;
            color: #fff;
            background: #ffce8f;
            padding: 2px 10px;
            border-radius: 15px;
          }
        }
        h4 {
          margin-top: 10px;
          font-size: 14px;
        }
        p {
          font-size: 14px;
          margin-top: 10px;
          color: #c4c4c4;
          span {
            margin-left: 10px;
            color: #fdbe79;
          }
        }
        .ios {
          color: #c6e2a6;
          font-size: 20px;
        }
        .android {
          color: #9de1f5;
          font-size: 18px;
        }
      }
      .list-bottom {
        font-size: 0;
        a {
          display: inline-block;
          width: 50%;
          line-height: 48px;
          font-size: 16px;
          color: #fff;
          text-align: center;
          background: #2cd0ff;
          &:last-child {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -o-box-sizing: border-box;
            border-left: 1px solid #fff;
            background: #88d42f;
          }
        }
      }
    }
  }
}
.gift-right {
  width: 260px;
  float: right;
}
</style>


